{% extends "xadmin/base_site.html" %}
{% load i18n %}
{% load url from future %}
{% load xadmin_tags %}
{% load crispy_forms_tags %}

{% block breadcrumbs %}
{% if account_view %}
<ul class="breadcrumb">
  <link href="/websys/static/xadmin/vendor/bootstrap-table/css/bootstrap-table.min.css" type="text/css" media="screen" rel="stylesheet" />
  <link src="/websys/static/css/jquery.dialog.css"/>
  <link src="/websys/static/css/jquery-ui.min.css"/>
<li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li class="active"> {{ title }} </li>
</ul>
{% else %}
<ul class="breadcrumb">
  <li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li>
    {% if has_view_permission %}
    <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    {% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}
  </li>
  <li><a href="{% url opts|admin_urlname:'change' original.pk %}">{{ original|truncatewords:"18" }}</a></li>
  <li class="active">{% trans 'Change password' %}</li>
</ul>
{% endif %}
{% endblock %}

{% block content-nav %}
{% endblock %}
{% block content %}
<!--页面设计在这儿....{{ serverval }}-->
    <style>
    .tb_tr{height: 50px; border:gainsboro 1px  double;}
    .tb_td{height: 50px; border: gainsboro 1px double; width:80px;}
    .td_info_1{background-color: #1da7ee;color: #0C0C0C;width: 100px; border:gainsboro 1px  double;}
    .td_info_2{width: 150px; border:gainsboro 1px  double;}
    .td_info_3{width: 300px; border:gainsboro 1px  double;}
    .txt_10{width: 300px;}
    .txt_20{width: 100px;}
    .td_title_1{font-weight: bold; font-size: 15px;}
    .tr_card_0{background-color: #1da7ee;}
    .tr_card_0 td{width: 80px;}
    .tb_normal{}
    .tb_normal td{border:gainsboro 1px  double;}
    table{table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}
    .tb_normal td.test{ background:none repeat scroll 0 0; margin:0px auto;  width:6em; table-layout:fixed; border:1px solid #a1bcdb; }
/*    .tb_normal {
            overflow: hidden;
            text-overflow:ellipsis;
            width:50px;
        }
    .tb_normal:hover { 
            overflow:visible;
            width:auto;
        }*/
    </style>
    <table style="width: 100%;">
<!--         <tr class="tb_tr">
            <td class="tb_td">服务器：</td>
            <td>
                <select id="sel_pf" multiple="true">
                    <option value="" selected="selected">请选择</option>
                    {% for item in htmldata.apps %}
                            <option value="{{ item.pf }}">{{ item.name }}</option>
                    {% endfor %}
                </select><span></span>
            </td>
        </tr> -->
        <tr class="tb_tr" id="tr_day" >
            <td class="tb_td">起始时间：</td>
            <td>
                <input type="text" id="day_0" class="datepicker" placeholder="请选择日期" />
                到
                <input type="text" id="day_1" class="datepicker" placeholder="请选择日期" />
            </td>
        </tr>
        <tr class="tb_tr">
            <td class="tb_td">邮件状态：</td>
            <td>
                <select id="sel_select">
                    <option value="" selected="selected">请选择</option>
                        <option value="0">新消息</option>
                        <option value="1">已查看</option>
                        <option value="2">已解决</option>
                </select>
            </td>
        </tr>
        <tr class="tb_tr" id="tr_uid" >
            <td class="tb_td">Uid：</td>
            <td><input type="text" maxlength="100" id="txt_uid" class="txt_10"><span></span>
            </td>
        </tr>
<!--         <tr class="tb_tr" id="tr_title" >
            <td class="tb_td">封号时间(小时)：</td>
            <td><input type="text" maxlength="40" id="forbidtime" class="txt_20">
            </td>
        </tr>
        <tr class="tb_tr" id="tr_contents" >
            <td class="tb_td">封号原因：</td>
            <td><textarea id="forbidreason" style="overflow:auto;" rows="10" cols="40"></textarea></td>
        </tr> -->
        <tr class="tb_tr">
            <td class="tb_td"></td>
            <td><label id="la_link"> {{links}}</label>&nbsp;&nbsp;<input type="button" id="bt_copy" value="查询" onclick="toSearch()"></td>
        </tr>
<!--     <div id='dialog'  style="display:none;" align="center" class="wrapper" >
    <textarea  rows=10 cols=30 class="demo_input" > 
    </textarea>
    <div><input type="button" id="bt_copy" value="回复" onclick="toSearch()"></div>
    </div> -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    玩家回复
                </h4>
            </div>
            <div class="modal-body">
                <textarea rows='10' cols='70' id="reply_content"> </textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onClick="postdata()">
                    提交回复
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--     <div style="display:none" id="div1" align="center">
         <textarea  cols="40" rows="10" id="replys"></textarea>
         <div><input type="button" name="button1" value="回复" onClick="postdata()">
            <input type="button" name="button2" value="取消" onClick="show()">
         </div>

         </div> -->
    <tr class="tb_tr">
            <td class="tb_td" colspan="2">
                <table data-toggle="table" data-height="100%"  data-pagination="true" id="table_report" style="">
                    <thead>
                        <tr>
<!--                             <th  data-field="id" class="id_th">ID</th> -->
                            <th  data-field="uids">UID</th>
                            <th  data-field="nickname">昵称</th>
                            <th  data-field="serverid">服务器</th>
                            <th  data-field="title">标题</th>
                            <th  data-field="is_reply">状态</th>
                            <th  data-field="is_who">内容所属</th>
                            <th  data-field="insert_time">时间</th>
                            <th data-field="detiale"
                                data-events="operateEvents"
                                data-formatter="operateFormatter"
                            > 操作</th>
                        </tr>
                    </thead>
                </table>
            </td>
    </tr>
        <tr class="tb_tr">
            <td class="tb_td td_title_1">回复记录</td>
            <td></td>
         </tr>
        <tr>
        <td class="tb_td"></td>
            <td>
                <table id="user_replys" class="tb_normal" style="word-wrap:break-word;">
                    <tr class="tr_card_0">
                        <td>昵称</td>
                        <td>服务器</td>
                        <td>标题</td>
                        <td class="test">内容</td>
                        <td>状态</td>
                        <td>内容所属</td>
                        <td>时间</td>
                        <td>回复者</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/websys/static/js/jquery.dialog.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table-locale-all.min.js"></script>
    <script>

    // $(function () {
    //     $("td").on("mouseenter",function() {
    //         if (this.offsetWidth < this.scrollWidth) {
    //             var that = this;
    //             var text = $(this).text();
    //             layer.tips(text, that,{
    //                 tips: 1,
    //                 time: 2000
    //             });
    //         }
    //     });
    // })

    var pagType='{{ htmldata.type }}';
    var dateType=new Array('year','month','day');
    var dateName={'year':'年份','month':'月份','day':'日期'};
    var curType='day';
    function setType(val)
    {//alert(val);
        for(var ii=0;ii<dateType.length;ii++)
        {
            if(ii==val)
            {
                $('#tr_'+dateType[val]).css('display', '');
            }
            else
            {
                $('#tr_'+dateType[ii]).css('display', 'none');
            }
            curType=dateType[val];
        }
    }
    function setDay()
    {//alert('month');
        for(var ii=0;ii<2;ii++) {
            $("#day_"+ii).datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                clearBtn: true,//清除按钮
                //todayBtn: true,//今日按钮
                startView: 'days',
                maxViewMode: 'days',
                minViewMode: 'days',
                format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
            });
            //$("#day_"+ii ).datepicker( 'setDate' , new Date());
        }
    }
    function setMonth()
    {//alert('month');
        for(var ii=0;ii<2;ii++) {
            $("#month_"+ii).datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                clearBtn: true,//清除按钮
                //todayBtn: true,//今日按钮
                startView: 'months',
                maxViewMode: 'months',
                minViewMode: 'months',
                format: "yyyy-mm"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
            });
            //$("#month_"+ii ).datepicker( 'setDate' , new Date());
        }
    }
    function setYear()
    {
        for(var ii=0;ii<2;ii++)
        {
            $("#year_"+ii).datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                clearBtn: true,//清除按钮
                //todayBtn: true,//今日按钮
                startView: 'years',
              maxViewMode:'years',
              minViewMode:'years',
                //defaultDate : '2017',
                format: "yyyy"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
            });
            //$("#year_"+ii).datepicker("setDate", '2017');
            //$("#year_"+ii ).datepicker( 'setDate' , new Date());
        }

    }

    $(function () {
        //setYear();
        //setMonth();
        setDay();

        $(".date-picker").datepicker({
                language: "zh-CN",
                autoclose: true,
            });
    });


    function show(){
        var value = document.getElementById("div1").style.display;
        if(value=="none"){
            document.getElementById("div1").style.display="block";

        }
        else{
            document.getElementById("div1").style.display="none";
        }
    }
    function toSearch()
    {
        var t_uid=$('#txt_uid').val();
        var select=$('#sel_select').val();
        var t0=$("#"+curType+"_0").val(),t1=$("#"+curType+"_1").val();
        if(t_uid==''&&select==''&&(t0==''||t1=='')){
            alert('不能都为空或选择正确日期!');
            return;
        }
        date=''
        if(t0!=''||t1!=''){
            date=t0+','+t1;
        }
        querset(1,t_uid,date,select);
        // var t_forbidtime=$('#forbidtime').val();
        // var forbidreason=$('#forbidreason').val();
        //var t_propids=$('#txt_propids').val();
        //var tr_numbers=$('#txt_numbers').val();
    //     var str = '';
    //     function fun(){
    //         var select = document.getElementById("sel_pf");
    //         //var str = [];
    //         for(i=0;i<select.length;i++){
    //             if(select.options[i].selected){
    //             str=str+select[i].value+',';
    //         }
    //     }
    // }
    // fun();
        // $.post('/xadmin/ajax_cbyx_otherdata/forbid/', {"uid":t_uid,"server":str}, function(result){
        //     //alert(result.ret);
        //     if(result.ret == 0)
        //     {
        //             //console.log($(id).attr('serverip'))
        //             alert(result.msg + "("+result.ret +")")
        //             window.location.reload();
        //     }else
        //     {
        //         alert(result.msg + "("+result.ret +")")
        //     }
        //  }, "json")

    
    }

//     function querset()
//     {
//         var turl='/xadmin/ajax_otherdata/email';//?date='+t0+','+t1+'&type='+t2;
//         $('#table_report').bootstrapTable('destroy'); // 显示之前，先把当前表格销毁
//         $('#table_report').bootstrapTable({
//             //search: true,
//             locale:'zh-CN',//中文支持
//             sortable: true,      //是否启用排序
//             showFooter:true,
//             sortName:'date',
//             //showRefresh: true,
//             pagination: true,//是否开启分页（*）
//             pageNumber:1,//初始化加载第一页，默认第一页
//             pageSize: 10,//每页的记录行数（*）
//             pageList: [10,20,50],//可供选择的每页的行数（*）
//             method: "get",         // 经过测试，只有post方法能发给后端的helloWorld.do
//             showExport: true,                     //是否显示导出
//             exportDataType: "basic",              //basic', 'all', 'selected'.
//             //sidePagination: 'server',
//             queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
// 　　// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
//             queryParams: function (params) {
//                 return {
//                     //meterID: $('#meterid').val(),
//                     pageSize: params.pageSize,
//                     //offset: params.offset,
//                     pageNumber:params.pageNumber,
//                     sortOrder: params.order,
//                     sort: params.sort, //排序列名
//                     name: user,
//                     //type: t2,
//                     sid: t_pf
//                 }
//             },
//             url:turl,   // 发送到后端helloWorld.do，由helloWorld.do返回json字符串，

//         });
//     }
    function querset(type,uid,time,status)
    {   
        //alert(t0+"-"+t1+"开发中。"+t2);//data-url="/websys/static/data2.txt"
        //var turl='/xadmin/ajax_cbyx_otherdata/reply_query';//?date='+t0+','+t1+'&type='+t2;
        var uids =0
        if(type==0){
        var turl='/xadmin/ajax_cbyx_otherdata/reply_query'
        $('#table_report').bootstrapTable('destroy'); // 显示之前，先把当前表格销毁
        $('#table_report').bootstrapTable({
            //search: true,
            locale:'zh-CN',//中文支持
            sortable: true,      //是否启用排序
            //showFooter:true,
            sortName:'date',
            //showRefresh: true,
            pagination: true,//是否开启分页（*）
             pageNumber:1,//初始化加载第一页，默认第一页
             pageSize: 10,//每页的记录行数（*）
              pageList: [10,20,50],//可供选择的每页的行数（*）
            method: "get",         // 经过测试，只有post方法能发给后端的helloWorld.do
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            //sidePagination: 'server',
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
　　// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: function (params) {
                return {
                    //meterID: $('#meterid').val(),
                    pageSize: params.pageSize,
                    //offset: params.offset,
                    pageNumber:params.pageNumber,
                    sortOrder: params.order,
                    sort: params.sort, //排序列名
                    uid:uids,
                }
            },

            url:turl,   // 发送到后端helloWorld.do，由helloWorld.do返回json字符串，
                                 // 必须是列表形式，例如：[{"name":"aaa","id":"kkk"},{...},...

        });
    }
    else{
        var turl='/xadmin/ajax_cbyx_otherdata/two_reply_query'
        $('#table_report').bootstrapTable('destroy'); // 显示之前，先把当前表格销毁
        $('#table_report').bootstrapTable({
            //search: true,
            locale:'zh-CN',//中文支持
            sortable: true,      //是否启用排序
            //showFooter:true,
            sortName:'date',
            //showRefresh: true,
            pagination: true,//是否开启分页（*）
             pageNumber:1,//初始化加载第一页，默认第一页
             pageSize: 10,//每页的记录行数（*）
              pageList: [10,20,50],//可供选择的每页的行数（*）
            method: "get",         // 经过测试，只有post方法能发给后端的helloWorld.do
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            //sidePagination: 'server',
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
　　// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: function (params) {
                return {
                    //meterID: $('#meterid').val(),
                    pageSize: params.pageSize,
                    //offset: params.offset,
                    pageNumber:params.pageNumber,
                    sortOrder: params.order,
                    sort: params.sort, //排序列名
                    uids:uid,
                    times:time,
                    statuss:status,
                }
            },

            url:turl,   // 发送到后端helloWorld.do，由helloWorld.do返回json字符串，
                                 // 必须是列表形式，例如：[{"name":"aaa","id":"kkk"},{...},...

        });
    }
    }
querset(0,0,0,0);

var ids='';
var playerid='';
var nickname='';
var title ='';
var serverid='';
    function operateFormatter(value, row, index) {
             return [
                 '<button type="button" id="opener" class="reply btn btn-default  btn-sm" data-target="#myModal" data-toggle="modal" style="margin-right:15px;">回复</button>'+
                 '<button type="button" class="guo btn btn-default  btn-sm" style="margin-right:15px;">详情</button>'
             ].join('');
         }
    window.operateEvents = {
             'click .reply': function (e, value, row, index) {
                    //show();
            //window.open("http://127.0.0.1:8000/xadmin/userdata/detaile"+'?'+'value='+row.userid+'&'+'server='+row.server)
            ids =row.id;playerid=row.uid;nickname=row.nickname;title=row.title;serverid=row.serverid;
    
           },

           'click .guo': function (e, value, row, index) {
                resetData();
                $.get('/xadmin/ajax_cbyx_otherdata/reply_query/', {"uid":row.uid}, function(result){
                //alert(result.ret);
                if(result.ret == 0)
                {       
                        addTR_Props(result.data);
                        //window.location.reload();
                }else
                {
                    alert(result.msg + "("+result.ret +")")
                }
             }, "json")
           }
         }
function postdata(){
            var reply_info =$('#reply_content').val();
            if (reply_info==''){
                alert('请输入回复内容!');
                return;
            }
            $.post('/xadmin/ajax_cbyx_otherdata/gm_reply/', {"playid":playerid,"id":ids,"nickname":nickname,"content":reply_info,'title':title,'serverid':serverid}, function(result){
                //alert(result.ret);
                if(result.ret == 0)
                {
                        //console.log($(id).attr('serverip'))
                        alert(result.msg + "("+result.ret +")")
                        window.location.reload();
                }else
                {
                    alert(result.msg + "("+result.ret +")")
                }
             }, "json")
    }
function resetData()
    {

    //删除表格
    delTable('user_replys');
        }

function delTable(tid)
    {
        //清空主题Table的数据
        var t=document.getElementById(tid);  //获取Table
        var length= t.rows.length;          //获得Table下的行数
        if(length!=0){              //如果有行，则清空
            for(var i=length-1;i>0;i--)
            {
             t.deleteRow(i);
            }
        }
    }
function addTR_Props(provinces)
    {
        //var objmoList1=new Array();//数组
        // var objmo=new Object();
        // 对象objmo.s="11";//对象里面的属性objmo.t="22";objmoList1.push(objmo);alert(objmoList1[0].s);
        //var provinces=new Array({'id':0,'name':'qq','num':1},{'id':2,'name':'mm','num':33});
        //var provinces=new Array();
        //var objmo={'id':0,'name':'qq','num':1};
        //var objmo=new Object();
        //objmo.id=0;objmo.name='qq';objmo.num=12;
        //provinces.push(objmo);

        var t=document.getElementById('user_replys');
        for (var i = 0; i < provinces.length; i++) {
            //tr
           var r = t.insertRow(t.rows.length);//创建新的行
            var tr_data=provinces[i];
            //td
            var c = r.insertCell();                //创建新的列
            //c.innerHTML = "<input type='checkbox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1];
            c.innerHTML= tr_data.nickname;
            c = r.insertCell();
            c.innerHTML= tr_data.serverid;
            c = r.insertCell();
            c.innerHTML= tr_data.title;
            c = r.insertCell();
            c.innerHTML= tr_data.content;
            c = r.insertCell();
            c.innerHTML= tr_data.is_reply;
            c = r.insertCell();
            c.innerHTML= tr_data.is_who;
            c = r.insertCell();
            c.innerHTML= tr_data.insert_time;
            c = r.insertCell();
            c.innerHTML= tr_data.oper;
            }
    }
//CreateRechargeDailog();
    </script>
{% endblock %}